<template>
	<view class="login">
		<view class="login-title" :style="{'paddingTop': height + 360 + 'rpx'}">
			<view>您好,</view>
			<view>欢迎登录高速公路公路施工智慧安全管控平台</view>
		</view>
		<view class="login-form">
			<view class="login-form-item">
				<view class="title">用户名</view>
				<input type="text" placeholder="请输入用户名" v-model="loginFrom.username">
			</view>
			<view class="login-form-item">
				<view class="title">密码</view>
				<!-- #ifdef  H5 -->
				<input type="text" placeholder="请输入密码" v-model="loginFrom.password">
				<!-- #endif -->
				<!-- #ifdef  MP-WEIXIN -->
				<input type="text" placeholder="请输入密码" v-model="loginFrom.password" :type="type">
				<!-- #endif -->
				<!-- 			<image src="/static/open-eye.png" mode="widthFix" @click="toggleType"></image> -->
			</view>
			<view class="login-form-item login-btn" @click="login">登录</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "../../components/uni-icon/uni-icons.vue"
	export default {
		data() {
			return {
				type: 'password',
				loginFrom: {
					username: 'hbjt_bt',
					password: 'hbjt_bt',
				},
				height: ''
			}
		},
		onLoad() {
			let _this = this
			uni.getSystemInfo({
				success: function(data) {
					// 将其赋值给this
					_this.height = data.statusBarHeight;
				}
			})
		},
		components: {
			uniIcons
		},
		methods: {

			// 点击登录按钮
			async login() {
				let username = this.loginFrom.username
				let password = this.loginFrom.password
				const obj = {
					username,
					password,
					client_id: 'ecs',
					client_secret: 'ecs123',
					grant_type: 'password',
				}
				uni.request({
					url: 'http://106.15.2.249:60000/bdmp/public/auth/token',
					method: "POST",
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: obj,
					success: (res) => {
						const {
							data,
							code,
							msg
						} = res.data
						if (code === '200') {
							let token = data.access_token
							uni.setStorageSync('token', token)
							uni.navigateTo({
								url: '/pages/index/index'
							});
						}
					}
				})
			},
			// 点击按钮切换密码框状态
			toggleType() {
				if (this.type === 'password') {
					this.type = 'input'
				} else {
					this.type = 'password'
				}
			},
			// 点击清空用户名表单
			clearNameInput() {
				this.loginFrom.username = ''
			}
		}
	}
</script>

<style scoped lang="less">
	.login {
		height: 100%;
		background: linear-gradient(#4befe5, #46d2e4);

		.login-title {
			box-sizing: border-box;
			height: 40%;
			color: #fff;
			// padding-top: 40%;
			padding-left: 20rpx;

			view {
				&:nth-child(1) {
					font-size: 48rpx;
					margin-bottom: 20rpx;
				}

				&:nth-child(2) {
					font-size: 30rpx;
				}
			}
		}

		.login-form {
			height: 60%;
			background-color: #fff;
			border-radius: 10rpx;

			.login-form-item {
				width: calc(100% - 40rpx);
				margin: 0 auto;
				padding-top: 40rpx;

				// position: relative;
				image {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 50rpx;
				}

				.title {
					font-weight: 700;
					color: #000000;
					font-size: 30rpx;
					margin-bottom: 20rpx;
				}

				input {
					border-bottom: 1px solid #c9c9c9;
					padding-bottom: 10rpx;
				}
			}

			.login-btn {
				color: #fff;
				text-align: center;
				border-radius: 8rpx;
				padding: 20rpx 0;
				margin-top: 40rpx;
				// background: linear-gradient(#4befe5, #46d2e4);
				background: #4befe5;
			}
		}
	}
</style>
